<template>
    <div class="goods">
        <el-row :gutter="10">
            <el-col  :xs="4" :sm="6" :md="8" :lg="9" :xl="11" :offset="3">
                <div class="container" style="height: 700px;width: 1000px;">
                    
                    <!-- 左侧图片 -->
                    <div class="img">
                        <el-image
                            style="width: 450px; height: 500px"
                            :src="goodDate.goodImg"
                            :fit="fit">
                        </el-image>
                    </div>
                    <!-- 右侧详情 -->
                    <div class="details" >
                        <div class="sku-name">
                            {{ goodDate.goodName }}
                        </div>
                        <div class="summary-price-wrap">
                            <el-descriptions class="margin-top" title="商品详情" :column="1" :size="size" style="padding-top: 60px;">
                               
                                <el-descriptions-item label="商品名"> {{ goodDate.goodName }}</el-descriptions-item>
                                <el-descriptions-item label="商品价格">¥{{ goodDate.goodPrice }}</el-descriptions-item>
                                <el-descriptions-item label="优惠价格" style="color: red;">¥{{ goodDate.discount }}</el-descriptions-item>
                                <el-descriptions-item label="颜色">
                                    <el-radio-group v-model="value1">
                                    <el-radio-button label="曜金黑"></el-radio-button>
                                    <el-radio-button label="月盈白"></el-radio-button>
                                    <el-radio-button label="草原绿"></el-radio-button>
                                    <el-radio-button label="基佬紫"></el-radio-button>
                                    </el-radio-group>
                                </el-descriptions-item>
                                <el-descriptions-item label="标签">
                                <el-tag size="medium " v-for="label in labels" :key="label"  effect="plain" type="danger">{{label.labelName}}</el-tag>                         
                                </el-descriptions-item>
                                <el-descriptions-item label="商品分类">  <el-tag size="small">{{goodDate.typeName}}</el-tag></el-descriptions-item>
                                <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>

                            </el-descriptions>
                            <span>数量</span>
                            <template>
                            <el-input-number v-model='num' controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
                            </template>
                            <el-button type="primary" size="small" @click="open">立即购买</el-button>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { set } from 'vue';
export default {
    data(){
        return{
            goodDate:{
                id:'', //商品id
                goodName:'',//商品名
                goodCode:'',// 商品编号
                goodImg:'', //商品图片
                goodPrice:'', //商品单价
                discount:'', //优惠价格
                typeId:'',  //类型id
                isPointGoods:0
            },
            labels:'',
            size:'100%',
            value1:'曜金黑',
            cities:['曜金黑', '月盈白', '草原绿', '基佬紫'],
            num:1,
            totalAmount:''
        }
    },
    methods:{
        queryGood(){
            let jwt = localStorage.getItem('jwt');
            this.goodDate.id = this.$route.query.goodId;
            console.log(this.goodDate.id);
        this.$axios.get('api/goods/goodById?id='+this.goodDate.id,{headers:{"jwt":jwt}})
            .then(response =>{
                if(response.data.code==200){
                    this.goodDate = response.data.data;
                   
                } else {
                    this.$message('获取信息失败');
                }
               
            });
        },
        handleChange(value){

        },
        queryLabel(){
            let jwt = localStorage.getItem('jwt');
            this.$axios.get('api/label/query',{headers:{"jwt":jwt}})
                .then(response =>{
                    if(response.data.code==200){
                        this.labels = response.data.data.list;
                    } else {
                        this.$message('获取信息失败');
                    }
                    console.log(this.labels);
                })
        },
        //点击购买
       test(){
        var str = Math.random().toString(10).slice(-7);//随机数当作订单
        alert(str);
       },
        PayGood(){
            let jwt = localStorage.getItem('jwt');
            let account = sessionStorage.getItem("account");
            this.totalAmount = this.num*(this.goodDate.goodPrice-this.goodDate.discount);
            
            var str = Math.random().toString(10).slice(-7);//随机数当作订单
            this.$axios.get('api/orders/addByGood?id='+this.goodDate.id+'&num='+this.num+'&account='+account,{headers:{"jwt":jwt}})
            .then(response =>{
                if(response.data.code==200){
                    window.open("api/alipay/pay?subject="+this.goodDate.goodName+ "&traceNo=" + str + "&totalAmount=" + this.totalAmount);
                } else if(response.data.code==202){
                    this.$message('该地区暂时无货');
                } else {
                    this.$message('购买失败');
                }
            })
        },
        //添加积分
        Point(){
            let jwt = localStorage.getItem('jwt');
            let account = sessionStorage.getItem("account");
            this.totalAmount = this.num*(this.goodDate.goodPrice-this.goodDate.discount);
            this.$axios.get('api/customer/addPoint?account='+account+'&actualPay='+this.totalAmount,{headers:{"jwt":jwt}})
                .then(res =>{
                    if(res.data.code==200){
                        console.log('添加积分');
                    }
                })
        },
        open() {
        this.$confirm('购买您将获得积分', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.Point();
            this.PayGood();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消购买'
          });          
        });
      }

    },
    created(){
      this.queryGood();
      this.queryLabel();
    }
}
</script>
<style scoped>
    .img {
        float: left;
    }
    .details {
        background-color:#f3f3f3;
        height: 500px;
        width: 550px;
        float: left;
    }
    .sku-name {
    font: 700 16px Arial,"microsoft yahei";
    color: #666;
    padding-top: 10px;
    line-height: 28px;
    margin-bottom: 5px;
    }
    .summary-price-wrap{
        width: 738px;
        height: 82px;
    }
    .el-descriptions-item{
        margin-top: 20px;
    }
</style>